// 箱体图 需要使用echarts5
(function () {
    // const myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8878F6", "#f0f"];
    let oEchart = echarts.init(document.getElementById('boxplotChart'));
    
    const formatter = (params) => {
        // ["base", "min", "Q1", "median", "Q3", "max"]
        let txt = '';
        txt += params.seriesName + '<br>'
            + params.marker + '上限值：' + params.data[5] + '<br>'
            + params.marker + '上四分位数：' + params.data[4] + '<br>'
            + params.marker + '中位数：' + params.data[3] + '<br>'
            + params.marker + '下四分位数:' + params.data[2] + '<br>'
            + params.marker + '下限值：' + params.data[1] + '<br>'
        return txt
    }
    // function getRandomNum(max = 1000, min = 100) {
    //     return Math.round(Math.random() * (max - min) + min)
    // }

    // 1980年前 date时间，spending支出，income收入
    const apiData = {
        date1: [
            { date: "1979", spending: 916, income: 595, profits: 534 },
            { date: "1978", spending: 275, income: 493, profits: 384 },
            { date: "1977", spending: 840, income: 626, profits: 592 },
            { date: "1976", spending: 557, income: 872, profits: 549 },
            { date: "1975", spending: 826, income: 831, profits: 111 },
            { date: "1974", spending: 422, income: 864, profits: 746 },
            { date: "1973", spending: 261, income: 424, profits: 346 },
            { date: "1972", spending: 994, income: 712, profits: 642 },
            { date: "1971", spending: 427, income: 134, profits: 971 },
            { date: "1970", spending: 683, income: 619, profits: 551 }
        ],
        date2: [
            { date: "1981", spending: 703, income: 700, profits: 336 },
            { date: "1982", spending: 110, income: 127, profits: 215 },
            { date: "1983", spending: 973, income: 830, profits: 151 },
            { date: "1984", spending: 793, income: 474, profits: 285 },
            { date: "1985", spending: 589, income: 135, profits: 905 },
            { date: "1986", spending: 429, income: 508, profits: 688 },
            { date: "1987", spending: 671, income: 367, profits: 867 },
            { date: "1988", spending: 173, income: 521, profits: 764 },
            { date: "1989", spending: 567, income: 148, profits: 554 },
            { date: "1990", spending: 414, income: 965, profits: 725 }
        ],
        date3: [
            { date: "1991", spending: 189, income: 660, profits: 666 },
            { date: "1992", spending: 512, income: 429, profits: 715 },
            { date: "1993", spending: 717, income: 847, profits: 240 },
            { date: "1994", spending: 598, income: 998, profits: 852 },
            { date: "1995", spending: 617, income: 215, profits: 333 },
            { date: "1996", spending: 951, income: 758, profits: 450 },
            { date: "1997", spending: 612, income: 219, profits: 633 },
            { date: "1998", spending: 917, income: 649, profits: 710 },
            { date: "1999", spending: 536, income: 155, profits: 177 },
            { date: "2000", spending: 251, income: 731, profits: 408 }
        ]
    }
    const date1 = [
        { date: "1979", spending: 916, income: 595, profits: 534 },
        { date: "1978", spending: 275, income: 493, profits: 384 },
        { date: "1977", spending: 840, income: 626, profits: 592 },
        { date: "1976", spending: 557, income: 872, profits: 549 },
        { date: "1975", spending: 826, income: 831, profits: 111 },
        { date: "1974", spending: 422, income: 864, profits: 746 },
        { date: "1973", spending: 261, income: 424, profits: 346 },
        { date: "1972", spending: 994, income: 712, profits: 642 },
        { date: "1971", spending: 427, income: 134, profits: 971 },
        { date: "1970", spending: 683, income: 619, profits: 551 }
    ]
    // 1980年后
    const date2 = [
        { date: "1981", spending: 703, income: 700, profits: 336 },
        { date: "1982", spending: 110, income: 127, profits: 215 },
        { date: "1983", spending: 973, income: 830, profits: 151 },
        { date: "1984", spending: 793, income: 474, profits: 285 },
        { date: "1985", spending: 589, income: 135, profits: 905 },
        { date: "1986", spending: 429, income: 508, profits: 688 },
        { date: "1987", spending: 671, income: 367, profits: 867 },
        { date: "1988", spending: 173, income: 521, profits: 764 },
        { date: "1989", spending: 567, income: 148, profits: 554 },
        { date: "1990", spending: 414, income: 965, profits: 725 }
    ]
    // 1990年后
    const date3 = [
        { date: "1991", spending: 189, income: 660, profits: 666 },
        { date: "1992", spending: 512, income: 429, profits: 715 },
        { date: "1993", spending: 717, income: 847, profits: 240 },
        { date: "1994", spending: 598, income: 998, profits: 852 },
        { date: "1995", spending: 617, income: 215, profits: 333 },
        { date: "1996", spending: 951, income: 758, profits: 450 },
        { date: "1997", spending: 612, income: 219, profits: 633 },
        { date: "1998", spending: 917, income: 649, profits: 710 },
        { date: "1999", spending: 536, income: 155, profits: 177 },
        { date: "2000", spending: 251, income: 731, profits: 408 }
    ]
    const data0 = [
        date1.map(item => item.spending),
        date1.map(item => item.income),
        date1.map(item => item.profits),
    ];
    const data1 = [
        date2.map(item => item.spending),
        date2.map(item => item.income),
        date2.map(item => item.profits),
    ];
    const data2 = [
        date3.map(item => item.spending),
        date3.map(item => item.income),
        date3.map(item => item.profits),
    ];

    console.log(data0, 'data0')

    option = {
        dataset: [
            {
                source: data0,

            },
            {
                source: data1,

            },
            {
                source: data2,

            },
            {
                fromDatasetIndex: 0,
                transform: { type: 'boxplot' }
            },
            {
                fromDatasetIndex: 1,
                transform: { type: 'boxplot' }
            },
            {
                fromDatasetIndex: 2,
                transform: { type: 'boxplot' }
            },
            {
                fromDatasetIndex: 0,
                fromTransformResult: 0
            },
            {
                fromDatasetIndex: 1,
                fromTransformResult: 1
            },
            {
                fromDatasetIndex: 1,
                fromTransformResult: 1
            }
        ],
        tooltip: {
            trigger: 'item',
            axisPointer: {
                type: 'shadow'
            },
            formatter: formatter
        },
        legend: {
            top: '10%'
        },
        grid: {
            top: '20%',
        },
        xAxis: {
            type: 'category',
            // data: ['支出','收入','利润']
        },
        yAxis: {
            type: 'value',
            name: 'Value',
            min: 0,
            max: 1500
        },
        dataZoom: [
            {
                type: 'inside',
                start: 0,
                end: data0.length > 3 ? Math.round(100 / (data0.length / 2)) : 100
            },
            {
                show: true,
                type: 'slider'
            }
        ],
        series: [
            {
                name: '70年',
                type: 'boxplot',
                datasetIndex: 3
            },
            {
                name: '80年',
                type: 'boxplot',
                datasetIndex: 4
            },
            {
                name: '90年',
                type: 'boxplot',
                datasetIndex: 5
            }
        ]
    }

    oEchart.setOption(option)
})()
